<template>
    <div>
      <p>input element</p>
      <input v-model="message" placeholder="edit me...">
      <p>message is: {{ message }}</p>
      <p>textarea element</p>
      <p style="white-space: pre">{{ message2 }}</p>
      <textarea v-model="message2" id="" cols="30" rows="10" placeholder="manyline input"></textarea>
      <p>sigle check box</p>
      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{{checked}}</label>
      <p>many check box</p>
      <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
      <label for="runoob">Runoob</label>
      <input type="checkbox" id="google" value="google" v-model="checkedNames">
      <label for="google">google</label>
      <input type="checkbox" id="taobao" value="taobao" v-model="checkedNames">
      <label for="taobao">taobao</label>
      <br>
      <span>the choosen value is: {{ checkedNames }}</span>
      <br>
      <input type="radio" id="radio1" value="radio1" v-model="picked">
      <label for="radio1">radio1</label>
      <br>
      <input type="radio" id="radio2" value="radio2" v-model="picked">
      <label for="radio2">radio2</label>
      <br>
      <span>the picked value is: {{ picked }}</span>
      <br>
      <select name="fruit" id="fruit_id" v-model="selected">
        <option value="">choose one web site</option>
        <option value="www.msp.com">msp</option>
        <option value="www.baidu.com">baidu.com</option>
      </select>
      <div>
        the chosen web site is :{{ selected }}
      </div>
      <p>choose all  and  not choose all</p>
      <input type="checkbox" id="allChecked" v-model="allChecked" @change="changeAllChecked()">
      <input type="checkbox" id="DeLong" value="DeLong" v-model="allCheckedNames">
      <label for="runoob">DeLong</label>
      <input type="checkbox" id="Yang" value="Yang" v-model="allCheckedNames">
      <label for="google">Yang</label>
      <input type="checkbox" id="ManyThing" value="ManyThing" v-model="allCheckedNames">
      <label for="taobao">ManyThing</label>
      <br>
      <select name="fruit_2" id="fruit_2" v-model="optionsListSelected">
        <option v-for="(item, index) in optionsList" :key="index" :value="item.value">
          {{ item.key }}
        </option>
      </select>
      <div id="optionOutput">
        choose web is: {{ optionsListSelected }}
      </div>
      <br>
    </div>
</template>
<script>
export default {
  name: 'form',
  data () {
    return {
      title: 'vue form 双向绑定数据',
      message: 'DeLong',
      message2: 'Yang',
      checked: false,
      checkedNames: [],
      picked: 'radio unknow',
      selected: '',
      lazyMsg: '',
      allChecked: false,
      allCheckedNames: [],
      allCheckedNamesArr: ['DeLong', 'Yang', 'ManyThing'],
      optionsList: [
        {
          key: '选择',
          value: 'Select'
        },
        {
          key: '淘宝',
          value: 'taobao'
        },
        {
          key: '京东',
          value: 'jingd'
        },
        {
          key: '阿里巴巴',
          value: 'alibaba'
        },
        {
          key: '亚马逊',
          value: 'amazon'
        },
        {
          key: '苏宁',
          value: 'suning'
        },
        {
          key: '拼多多',
          value: 'pinduoduo'
        }
      ],
      optionsListSelected: 'OptionListSelected'
    }
  },
  computed: {
  },
  methods: {
    changeAllChecked: function () {
      if (this.allChecked) {
        this.allCheckedNames = this.allCheckedNamesArr
      } else {
        this.allCheckedNames = []
      }
    }
  },
  watch: {
    'allCheckedNames': function () {
      if (this.allCheckedNames.length === this.allCheckedNamesArr.length) {
        this.allChecked = true
      } else {
        this.allChecked = false
      }
    }
  }
}
</script>

<style>
.text-danger {
  background: red;
}
</style>
